<template>
  <div class="search-index">
    <!-- 搜索框 -->
    <van-cell-group>
      <van-field
        v-model="searchVal"
        center
        clearable
        placeholder="搜索商品"
      >
        <van-button @click="handleSearch" slot="button" size="small" type="primary">搜索</van-button>
      </van-field>
    </van-cell-group>

    <!-- 搜索结果 -->
    <div class="sport">
      <!-- 无结果 -->
      <!-- <div class="empty" v-show="!res">
        <p>暂无搜索商品</p>
        <van-button plain>去购买</van-button>
      </div> -->
      <!-- 搜索历史 -->
      <div class="historyList" v-show="!resSearch">
        <div class="title">
          <span>{{historyList.length === 0 ? '没有搜索历史' : '搜索历史'}}</span>
          <span v-show="historyList.length !== 0" @click="handleDel">清空 <van-icon name="close"/></span>
        </div>
        <!-- 历史列表 -->
        <van-tag
          v-for="(item, index) of historyList"
          :key="index"
          color="#006699"
          size="large"
          @click="handleClickTag">
            <span>{{item}}</span>
            <van-icon
              name="close"
              @click.stop="handleClose"/>
            </van-tag>
      </div>
      <!-- 结果 -->
      <div class="item" v-show="resSearch" v-for="item in resList" :key="item.id">
        <router-link :to="'/product/'+item.id">
          <img :src="'http://127.0.0.1:3000' + item.pic[0].picAddr" alt="">
          <p>{{item.proName}}</p>
          <div class="price">
            <span>￥{{item.price}}</span>
            <s>￥{{item.oldPrice}}</s>
          </div>
          <button>立即购买</button>
        </router-link>
      </div>

    </div>
  </div>
</template>

<script>
import { mobile } from '@/api'
export default {
  name: 'SearchIndex',
  data () {
    return {
      searchVal: '', // 搜索内容
      resList: [], // 搜索结果列表
      // res: false, // 显示历史、结果标志
      historyList: [] // 搜索历史
    }
  },
  computed: {
    resSearch () {
      return this.resList.length !== 0
    }
  },
  mounted () {
    this.initHistoryList()
  },
  methods: {
    // 搜索
    handleSearch () {
      // 为空判断
      if (this.searchVal.trim() === '') {
        this.$notify({
          message: '请输入搜索内容',
          duration: 5000,
          color: '#fff',
          background: '#ff4444'
        })
        return
      }
      // 保存搜索历史
      this.handleSave()
      let searchObj = {
        proName: this.searchVal,
        page: 1,
        pageSize: 10
      }
      mobile.search(searchObj).then(res => {
        console.log(res)
        if (res.data.data.length !== 0) {
          // 显示结果
          // this.res = true
          this.resList = res.data.data
        } else {
          this.resList = []
          this.$notify({
            message: '暂无该商品',
            duration: 5000,
            color: '#fff',
            background: '#ff4444'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 保存
    handleSave () {
      // 读取储存
      this.historyList = JSON.parse(localStorage.getItem('historyList')) || []
      // 判断是否已有储存
      if (this.historyList.indexOf(this.searchVal) >= 0) {
        return
      }
      // 在前追加
      this.historyList.unshift(this.searchVal)
      // 设置储存
      localStorage.setItem('historyList', JSON.stringify(this.historyList))
    },
    // 初始化搜索历史
    initHistoryList () {
      this.historyList = JSON.parse(localStorage.getItem('historyList')) || []
    },
    // 点击搜索历史tag
    handleClickTag (e) {
      let text = e.target.innerText
      // 设置当前搜索内容
      this.searchVal = text
      // 执行搜索
      this.handleSearch()
    },
    // 点击关闭tag
    handleClose (e) {
      // 使用 .stop 来阻冒泡 ， 获取tag内容
      let text = e.target.parentElement.innerText
      // 读取储存
      this.historyList = JSON.parse(localStorage.getItem('historyList')) || []
      // 获取到在数组中的索引
      let index = this.historyList.indexOf(text)
      // 删除
      this.historyList.splice(index, 1)
      // 保存
      localStorage.setItem('historyList', JSON.stringify(this.historyList))
    },
    // 清除搜索历史
    handleDel () {
      this.historyList = []
      localStorage.setItem('historyList', JSON.stringify(this.historyList))
      this.$notify({
        message: '已清空',
        duration: 5000,
        color: '#fff',
        background: '#1989fa'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-index {
  padding: 10px;
  padding-top: 56px;
  padding-bottom: 50px;
  // 搜索框
  .van-cell-group {
    .van-field {
      border: 1px solid #006699;
      border-radius: 5px;
      padding: 0 0 0 10px;
      .van-button {
        background-color: #006699;
        border: 1px solid #006699;
      }
    }
  }
  // 运动生活
  .sport {
    margin-top: 5px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    .item {
      padding: 10px;
      width: 50%;
      box-shadow: 5px 5px 5px #f1f1f1;
      a {
        display: block;
        color: #666;
        font-size: 14px;
        text-align: center;
        .price {
          margin: 5px;
          span {
            color: red;
            padding: 10px;
          }
        }
        button {
          display: block;
          width: 100%;
          margin: 0 auto;
          border: 1px solid #006699;
          color: #fff;
          padding: 3px 10px;
          background-color: #046698;
        }
      }
    }
  }
  // 搜索历史
  .historyList {
    width: 100%;
    padding: 5px 0;
    // background-color: #f1f1f1;
    .title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      width: 100%;
      padding: 0 10px;
      margin: 0 0 5px 0;
      font-size: 14px;
      color: #666;
      background-color: #f8f8f8;
      // text-align: center;
    }
    .van-tag {
      margin: 5px;
      padding: 5px 10px;
      vertical-align: center;
      .van-icon {
        font-size: 16px;
        margin-left: 5px;
      }
    }
  }
  // 无结果
  .empty {
    margin: 20px auto;
    text-align: center;
    .van-button {
      width: 100px;
      margin: 10px;
      background-color: #006699;
      color: #fff;
    }
  }
}
</style>
